<%@ include file="/WEB-INF/jsp/include.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<div id="userData">
    Money: ${user.money}
</div>

<div id="userBag">
    <table class="table table-hover table-condensed">
	    <caption>My bag</caption>
	    <thead>
	        <tr>
	            <th>Component name</th>
	            <th>Type</th>
	            <th>Mounted in computer</th>
	            <th>Damage</th>
                <th>Actions</th>
	        </tr>
	    </thead>
	    <tbody id="userBagData">
	        <c:forEach var="userComponent" items="${userComponents}">
	        
	            <c:url var="sell_component" value="/user/sell/${userComponent.idComponentOnBag}" />
	            
	            <tr>
	               <td>${userComponent.component.name}</td>
	               <td>${userComponent.componentType}</td>
	               <td>${userComponent.mounted}</td>
	               <td>${userComponent.life}</td>	               
	               <td>
                    <span onmouseover="javascript:showDiv(${userComponent.idComponent}, event)"
                          onmouseout="javascript:hiddenDiv(${userComponent.idComponent})">
                        <i class="icon-eye-open" ></i>
                    </span>
                    <a href="${delete_component}"><i class="icon-trash"></i></a>
                </td>
	           </tr>
	           
	           
	           <c:if test="${userComponent.componentType == 'Firewall'}">                
                <div id="${userComponent.idComponentOnBag}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                       
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Access difficult : ${userComponent.component.dificultAccess}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>                          
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${userComponent.componentType == 'HardDisk'}">                
                <div id="${userComponent.idComponentOnBag}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                      
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Total capacity   : ${userComponent.component.totalCapacity}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${userComponent.componentType == 'NetworkCard'}">                
                <div id="${userComponent.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                     
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Speed connection : ${userComponent.component.speedConection}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${userComponent.componentType == 'PowerSupply'}">                
                <div id="${userComponent.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">  
                        <ul>
                            <li>Id component     : ${userComponent.component.idComponent}</li>                         
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Generated energy : ${userComponent.component.generatedEnergy}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${userComponent.componentType == 'Processor'}">                
                <div id="${userComponent.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                         
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Speed for core   : ${userComponent.component.speedForCore}</li>
                            <li>Cores            : ${userComponent.component.cores}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${userComponent.componentType == 'RamMemory'}">                
                <div id="${userComponent.idComponent}" class="div_info_hidden">
                      
                    <div class="arrow"></div>
                    <h3 class="popover-title">${userComponent.component.componentName}</h3>
                    <div class="popover-content">             
                        <ul>
                            <li>Id component     : ${userComponent.component.idComponent}</li>                            
                            <li>Component type   : ${userComponent.component.componentType}</li>
                            <li>Energy to turn on: ${userComponent.component.energyToTurnOn}</li>
                            <li>Price            : ${userComponent.component.price}</li>
                            <li>Capacity         : ${userComponent.component.totalCapacity}</li>
                            <li>Mounted          : ${userComponent.mounted}</li>
                            <li>Damage           : ${userComponent.life }</li>
                        </ul>
                    </div>
                </div>
            </c:if>
                       
	        </c:forEach>
	    </tbody>
	</table>
</div>

<div id="itemsInShop" >
    
    <table class="table table-hover table-condensed">
    <caption>List of Components</caption>
    <thead>
        <tr>
            <th>Component name</th>
            <th>Type</th>
            <th>Energy to turn on</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="comp" items="${componentsInSHop}">
            <tr>
            
                <c:url var="buy_component" value="/user/shop/buy/${comp.idComponent}" />
     
                <td>${comp.componentName}</td>
                <td>${comp.componentType}</td>
                <td>${comp.energyToTurnOn}</td>
                <td>${comp.price}</td>                    
            
                <td>
                    <span class="cursorPointer" onmouseover="javascript:showDiv(${comp.idComponent}, event)"
                          onmouseout="javascript:hiddenDiv(${comp.idComponent})">
                        <i class="icon-eye-open" ></i>
                    </span>
                    <%-- <a href="${buy_component}"><i class="icon-plus"></i></a> --%>
                    <span class="cursorPointer" onclick="javascript:ajaxBuyComponent(${user.id}, ${comp.idComponent})"><i class="icon-plus"></i></span>
                </td>
                
            </tr>

            <c:if test="${comp.componentType == 'Firewall'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                     
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Access difficult : ${comp.dificultAccess}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'HardDisk'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                      
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Total capacity   : ${comp.totalCapacity}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'NetworkCard'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                     
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Speed connection : ${comp.speedConection}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'PowerSupply'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                       
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Generated energy : ${comp.generatedEnergy}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'Processor'}">                
                <div id="${comp.idComponent}" class="div_info_hidden" >
                <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">  
                        <ul>                      
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Speed for core   : ${comp.speedForCore}</li>
                            <li>Cores            : ${comp.cores}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
            
             <c:if test="${comp.componentType == 'RamMemory'}">                
                <div id="${comp.idComponent}" class="div_info_hidden">
                      
                    <div class="arrow"></div>
                    <h3 class="popover-title">${comp.componentName}</h3>
                    <div class="popover-content">             
                        <ul>                       
                            <li>Component type   : ${comp.componentType}</li>
                            <li>Energy to turn on: ${comp.energyToTurnOn}</li>
                            <li>Price            : ${comp.price}</li>
                            <li>Capacity         : ${comp.totalCapacity}</li>
                        </ul>
                    </div>
                </div>
            </c:if>
        </c:forEach>
    </tbody>
    </table>

	<div class="pagination">
	    <ul>
	        <c:choose>
	            <c:when test="${currentIndex == 1}">
	                <li class="disabled"><a href="#">&lt;&lt;</a></li>
	                <li class="disabled"><a href="#">&lt;</a></li>
	            </c:when>
	            <c:otherwise>
	                <li><a href="#" onclick='javascript:ajaxPages("1")'>&lt;&lt;</a></li>
	                <li><a href="#" onclick='javascript:ajaxPages(${currentIndex - 1})'>&lt;</a></li>
	            </c:otherwise>
	        </c:choose>
	        <c:forEach var="i" begin="${beginIndex}" end="${endIndex}">
	            <c:choose>
	                <c:when test="${i == currentIndex}">
	                    <li class="active"><a href="#" onclick='javascript:ajaxPages(${i})' ><c:out value="${i}" /></a></li>
	                </c:when>
	                <c:otherwise>
	                    <li><a href="#" onclick='javascript:ajaxPages(${i})' ><c:out value="${i}" /></a></li>
	                </c:otherwise>
	            </c:choose>
	        </c:forEach>
	        <c:choose>
	            <c:when test="${currentIndex == totalPages}">
	                <li class="disabled"><a href="#">&gt;</a></li>
	                <li class="disabled"><a href="#">&gt;&gt;</a></li>
	            </c:when>
	            <c:otherwise>
	                <li><a href="#" onclick='javascript:ajaxPages(${currentIndex + 1})'>&gt;</a></li>
	                <li><a href="#" onclick='javascript:ajaxPages(${totalPages})'>&gt;&gt;</a></li>
	            </c:otherwise>
	        </c:choose>
	    </ul>
	</div>

</div>